<template>
  <normal-layout page-index="7-4">
    <div class="bodyDiv">
      <div class="left">
        <el-card style="justify-content: center;">
          <div style=" margin: 10px">
            <div style="text-align: center">
              <h3 style="margin-left: -150px">服务器总数</h3>
              <h1 style="color: #409EFF;font-size: 95px;">{{current}}</h1>
            </div>
            <el-divider></el-divider>
            <div style="text-align: center;">
              <h3 style="margin-left: -150px">在线服务数</h3>
              <h1 style="color: #B7EB8F;font-size: 95px;">{{current}}</h1>
            </div>
            <el-divider></el-divider>
            <div style="text-align: center;">
              <h3 style="margin-left: -150px">离线服务数</h3>
              <h1 style="color: #B7EB8F;font-size: 95px;">{{current}}</h1>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 10px">
          <h4>在线/离线对比</h4>
          <annual-pie style="height: 280px;margin-top:-25px;margin-bottom: -15px " :test-data="pieData"></annual-pie>
        </el-card>
      </div>


      <div class="right">
        <el-card>
          <div style="display: flex; justify-content: space-between; padding: 10px">
            <div>
              根目录： <el-select placeholder="请选择根目录"></el-select>
            </div>
            <div>
              <el-button type="primary" >修改根目录</el-button>
              <el-button @click="trainVisible=true">刷新路径树</el-button>
            </div>
          </div>
          <el-table :data="serverList"
                    style="width: 100%;height: 760px;overflow-y: auto"
                    stripe
                    highlight-current-row
                    ref="tableList">
            <el-table-column label="序号" prop="id"></el-table-column>
            <el-table-column label="配置" prop="config"></el-table-column>
            <el-table-column label="IP" prop="ip"></el-table-column>
            <el-table-column label="服务器状态" prop="condition"></el-table-column>
            <el-table-column label="内存" prop="ROM"></el-table-column>
            <el-table-column label="操作" min-width="170px">
              <template slot-scope="scope">
                  <el-button size="small">刷新</el-button>
                  <el-button type="primary" size="small">重置连接</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination></el-pagination>
        </el-card>
      </div>
    </div>
  </normal-layout>
</template>

<script>
  import NormalLayout from "../../components/NormalLayout";
  import AnnualPie from "../../components/Charts/AnnualPie";
    export default {
        name: "AlgorithmServer",
      components:{AnnualPie, NormalLayout},
      data(){
        return{
          current:99,
          pieData:[
            {value: 1048, name: '在线服务数'},
            {value: 735, name: '离线服务数'},
          ],
          serverList:[
            {
              id:'01',
              config:'配置一',
              ip:'168.168.168.2',
              condition:'在线',
              ROM:'512G',
            },
            {
              id:'02',
              config:'配置二',
              ip:'168.168.132.5',
              condition:'离线',
              ROM:'128G',
            },
            {
              id:'03',
              config:'配置三',
              ip:'168.168.136.1',
              condition:'在线',
              ROM:'1024G',
            },
            {
              id:'04',
              config:'配置四',
              ip:'168.168.144.9',
              condition:'在线',
              ROM:'256G',
            },
            {
              id:'05',
              config:'配置五',
              ip:'168.168.135.5',
              condition:'在线',
              ROM:'256G',
            }
          ]
        }
      }
    }
</script>

<style scoped>
  .bodyDiv{
    margin: 10px;
    display: flex;
  }
  .top{
    display: flex;
  }
  .left{
    width: 25%;
  }
  .right{
    width: 75%;
    margin-left: 10px;
  }
</style>
